<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	pageContext.setAttribute("basePath",request.getContextPath());
%>
<!DOCTYPE html>
<html lang="zh" >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>用户个人信息</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="${basePath }/static/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="${basePath }/static/css/font-awesome.min.css" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link href="${basePath }/static/ajax/libs/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"/>
    <link href="${basePath }/static/css/animate.css" rel="stylesheet"/>
    <link href="${basePath }/static/css/style.css" rel="stylesheet"/>
    <link href="${basePath }/static/ruoyi/css/ry-ui.css" rel="stylesheet"/>
</head>

<body class="gray-bg" style="font: 14px Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif !important;">
<input id="userId" name="userId" type="hidden" value="1" />
<section class="section-content">
    <div class="row">
        <div class="col-xs-3 pr5">
            <div class="ibox float-e-margins">
                <div class="ibox-title ibox-title-gray dashboard-header gray-bg">
                    <h5>个人资料</h5>
                </div>
                <div class="ibox-content">
                    <div class="text-center">
                        <p><img class="img-circle img-lg" src="${basePath }${user.head }"></p>
                        <p><a href="javascript:avatar()">修改头像</a></p>
                    </div>
                    <ul class="list-group list-group-striped">
                    	<li class="list-group-item"><i class="fa fa-user"></i>
                            <b class="font-noraml">用户ID：</b>
                            <p class="pull-right">${user.userId }</p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-user"></i>
                            <b class="font-noraml">用户姓名：</b>
                            <p class="pull-right">${user.name }</p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-phone"></i>
                            <b  class="font-noraml">手机号码：</b>
                            <p class="pull-right">${user.phone }</p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-envelope-o"></i>
                            <b  class="font-noraml">邮箱地址：</b>
                            <p class="pull-right" >${user.email }</p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-envelope-o"></i>
                            <b  class="font-noraml">个人地址：</b>
                            <p class="pull-right" >${user.address }</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-xs-9" style="padding-left: 0px">
            <div class="ibox float-e-margins">
                <div class="ibox-title ibox-title-gray dashboard-header">
                    <h5>基本资料</h5>
                </div>
                <div class="ibox-content">
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#user_info" data-toggle="tab" aria-expanded="true">基本资料</a></li>
                            <li><a href="#modify_password" data-toggle="tab" aria-expanded="false">修改密码</a></li>
                        </ul>
                        <div class="tab-content">
                            <!--用户信息-->
                            <div class="tab-pane active" id="user_info">
                                <form class="form-horizontal" id="form-user-edit">
                                    <!--隐藏ID-->
                                    <input name="userId" type="hidden" value="${user.userId }">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">姓名：</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" name="name" placeholder="请输入姓名" value="${user.name }">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">性别：</label>
                                        <div class="col-sm-10">
                                            <div class="input-group" style="width: 100%">
                                                <select name="sex" class="form-control" required>
                                                	<option></option>
                                                    <option value="0">男</option>
                                                    <option value="1">女</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">手机号码：</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" name="phone" maxlength="11" placeholder="请输入手机号码" id="phone" value="${user.phone }">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">身份证号：</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" name="idCard" placeholder="请输入身份证号" value="${user.idCard }">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-check"></i>保 存</button>&nbsp;
                                            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            <!--修改密码-->
                            <div class="tab-pane" id="modify_password">
                                <form class="form-horizontal" id="form-user-resetPwd">
                                	<!--隐藏ID-->
                                    <input name="userId" type="hidden" class="id" value="${user.userId }">
                                    <input name="email" type="hidden" class="email" value="${user.email }">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">旧密码：</label>
                                        <div class="col-sm-10">
                                            <input type="password" class="form-control" name="oldPassword" id="repwd" placeholder="请输入旧密码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">新密码：</label>
                                        <div class="col-sm-10">
                                            <input type="password" class="form-control" name="password" id="password" placeholder="请输入新密码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">确认密码：</label>
                                        <div class="col-sm-10">
                                            <input type="password" class="form-control" name="confirmPassword" placeholder="请确认密码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-check"></i>保 存</button>&nbsp;
                                            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<script src="${basePath }/static/js/jquery.min.js"></script>
<script src="${basePath }/static/js/bootstrap.min.js"></script>
<!-- bootstrap-table 表格插件 -->
<script src="${basePath }/static/ajax/libs/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${basePath }/static/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="${basePath }/static/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js"></script>
<script src="${basePath }/static/ajax/libs/bootstrap-table/extensions/toolbar/bootstrap-table-toolbar.min.js"></script>
<script src="${basePath }/static/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.js"></script>
<!-- jquery-validate 表单验证插件 -->
<script src="${basePath }/static/ajax/libs/validate/jquery.validate.min.js"></script>
<script src="${basePath }/static/ajax/libs/validate/messages_zh.min.js"></script>
<script src="${basePath }/static/ajax/libs/validate/jquery.validate.extend.js"></script>
<!-- jquery-validate 表单树插件 -->
<script src="${basePath }/static/ajax/libs/bootstrap-treetable/bootstrap-treetable.js"></script>
<!-- jquery-export 表格导出插件 -->
<script src="${basePath }/static/ajax/libs/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
<script src="${basePath }/static/ajax/libs/bootstrap-table/extensions/export/tableExport.js"></script>
<!-- 遮罩层 -->
<script src="${basePath }/static/ajax/libs/blockUI/jquery.blockUI.js"></script>
<script src="${basePath }/static/ajax/libs/iCheck/icheck.min.js"></script>
<script src="${basePath }/static/ajax/libs/layer/layer.min.js"></script>
<script src="${basePath }/static/ajax/libs/layui/layui.js"></script>
<script src="${basePath }/static/ruoyi/js/common.js"></script>
<script src="${basePath }/static/ruoyi/js/ry-ui.js"></script>

<script>

	//获取项目根目录
	function getRootPath(){
		let href = window.document.location.href;
		let pathName = window.document.location.pathname;
		let index = href.indexOf(pathName);
		let localhost = href.substring(0,index);
		let project = pathName.substring(0,(pathName.substr(1).indexOf('/'))+1);
			
		return (localhost+project);
	}
	
	var rootPath = getRootPath();

    /*用户管理-头像*/
    function avatar() {
        var url = "http://www.baidu.com"; 
        $.modal.open("修改头像", url);
    }

    /*用户信息-修改*/
    $("#form-user-edit").validate({
        rules:{
            name:{
                required:true
            },
            phone:{
                required:true,
                isPhone:true
            },
            idCard:{
                required:true,
                isIdCard:true
            },
        },
        messages: {
            "name": {
                required: "请输入名字"
            },
            "phone":{
                required: "请输入手机号码"
            },
            "idCard": {
                required: "请输入身份证号"
            }
        },
        submitHandler: function() {
            //此处写请求后台的ajax
            let data = $("#form-user-edit").serialize();
            $.ajax({
            	url:rootPath+"/user/edit.do",
            	type:"POST",
            	data : data,
            	dataType : "json",
                success : function (response) {
                	$.modal.alert(response.message);
                }                	  
            });
            
        }
    });
    
 	// 自定义验证
    jQuery.validator.addMethod("isIdCard", function(value, element) {
        let id = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;
        return this.optional(element) || (id.test(value));
    }, "请正确填写您的身份证号");

    jQuery.validator.addMethod("isPhone", function(value, element) {
        let phone = /^1[3456789]\d{9}$/;
        return this.optional(element) || (phone.test(value));
    }, "请正确填写您的手机号");
    
        
    /*用户管理-修改密码*/
    $("#form-user-resetPwd").validate({
        rules:{
            oldPassword:{
                required:true
            },
            password: {
                required: true,
                minlength: 6,
                maxlength: 20
            },
            confirmPassword: {
                required: true,
                equalTo: "#password"
            }
        },
        messages: {
            oldPassword: {
                required: "请输入原密码"
            },
            newPassword: {
                required: "请输入新密码",
                minlength: "密码不能小于6个字符",
                maxlength: "密码不能大于20个字符"
            },
            confirmPassword: {
                required: "请再次输入新密码",
                equalTo: "两次密码输入不一致"
            }

        },
        submitHandler: function(){
        	
        	let id = $("#form-user-resetPwd .id").val();
        	let repwd = $("#form-user-resetPwd #repwd").val();
        	let password = $("#form-user-resetPwd #password").val();
        	
        	$.ajax({
            	url:rootPath+"/user/retpwd.do",
            	type:"POST",
            	data : {
            		userId : id,
            		repwd:repwd,
            		password : password
            	},
            	dataType : "json",
                success : function (response) {
                	$.modal.alert(response.message);
                }                	  
            });
        }
       
    });

</script>
</body>
</html>
